<script setup>
import { ref, computed } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  dataList: {
    type: Object,
    required: true,
    default: () => {
      return {
        xrr: [],
        yArr: [],
      };
    },
  },
  isQuality: {
    type: Boolean,
    default: false,
  },
  height: {
    type: String,
    default: "300px",
  },
});

const option = computed(() => {
  return {
    color: ["#8769FF", "#2DB9FF", "#56A3F1", "#FF917C"],
    legend: {
      itemWidth: 16,
      itemHeight: 16,
      icon: "circle",
      bottom: "0%", // 从顶部设置图例位置，可以使用 '10%', '20%', 'auto' 等
      left: "center", // 左侧位置，'left' | 'right' | 'center' | 具体位置数值
      textStyle :{
        color:'#e6e5e7',
        verticalAlign:'middle'
      },
    },
    grid: {
      top: 0,
      left: 20,
      x: 0,
      y: 10,
      x2: 10,
      y2: 0,
    },
    radar: [
      {
        indicator: props.isQuality
          ? [
              { text: "总分", max: 300 },
              { text: "德", max: 100 },
              { text: "智", max: 100 },
              { text: "体", max: 100 },
              { text: "美", max: 100 },
              { text: "劳", max: 100 },
            ]
          : [
              { text: "总分", max: 300 },
              { text: "英语", max: 100 },
              { text: "数学", max: 100 },
              { text: "语文", max: 100 },
            ],
        center: ["50%", "50%"], // 设置雷达图居中
        radius: 140,
        startAngle: 90,
        splitNumber: 4,

        axisName: {
          formatter: "{value}",
          color: "#e6e5e7",
        },
        splitArea: {
          areaStyle: {
            color: ["transparent", "transparent", "transparent", "transparent"],
          },
        },
        axisLine: {
          lineStyle: {
            color: "#e6e5e7",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#e6e5e7",
          },
        },
      },
    ],
    series: [
      {
        type: "radar",
        // emphasis: {
        //   lineStyle: {
        //     width: 4
        //   }
        // },
        label: {
          show: false, // 初始时不显示label
          position: "top", // label显示在柱子顶部
          // formatter: function(params) {
          //   // 硬编码指标名称，因为你知道它们的顺序
          //   var indicators = ['总分', '英语', '数学', '语文'];
          //   var formattedString = indicators.map(function(indicator, index) {
          //     return indicator + ':' + params.value[index];
          //   })
          //   return formattedString;
          //
          // }
        },
        emphasis: {
          // 悬浮时的样式
          label: {
            show: true, // 悬浮时显示label
          },
        },
        data: props.dataList,
      },
    ],
  };
});
</script>

<template>
  <e-charts :style="{ height: height }" class="chart" :option="option" />
</template>

<style>
.chart {
  height: 300px;
}
</style>
